<template>
  <div class="pop-menu">
    <nav>
      <ul>
        <Pop :popInfo="{ title: 'daily', dataItem: '0', menuName: '/daily' }">
          <i class="el-icon-tickets"></i>
        </Pop>
        <Pop :popInfo="{ title: 'login', dataItem: '1', menuName: '/login' }">
          <i class="el-icon-user-solid"></i>
        </Pop>
        <Pop :popInfo="{ title: 'toptip', dataItem: '2', menuName: '/other' }">
          <i class="el-icon-rank"></i>
        </Pop>
        <Pop :popInfo="{ title: 'other', dataItem: '3', menuName: '/other' }">
          <i class="el-icon-edit"></i>
        </Pop>
        <Pop :popInfo="{ title: '等待...', dataItem: '5' }">
          <i class="el-icon-loading"></i>
        </Pop>
      </ul>
    </nav>
  </div>
</template>

<script>
import Pop from "./Pop";
export default {
  name: "PopMenu",
  components: {
    Pop,
  },
  methods: {
    start() {
      const changeMenu = (v) => {
        this.$router.push(v);
      };
      let rise = function (trigEl) {
        trigEl.blur();
        let ul = document.querySelector("ul");
        ul.classList.add("rise");
        trigEl.classList.add("pop");
        setTimeout(function () {
          trigEl.focus();
          ul.classList.remove("rise");
          trigEl.classList.remove("pop");
        }, 1000);
      };
      document.querySelectorAll("li a").forEach(function (el) {
        let rt = document.querySelector(":root"),
          di = +el.getAttribute("data-item");
        el.addEventListener("focus", function (e) {
          rt.style.setProperty("--rotateTimes", di);
        });
        el.addEventListener("dblclick", function () {
          rise(this);
          changeMenu(el.getAttribute("menu-name"));
        });
        el.addEventListener("keyup", function (e) {
          if (e.keyCode === 13) {
            rise(this);
            setTimeout(() => {
              changeMenu(el.getAttribute("menu-name"));
            }, 800);
          }
        });
      });
    },
  },
  mounted() {
    this.start();
  },
};
</script>


<style>
:root {
  font-size: calc(16px + (20 - 16) * (100vw - 320px) / (980 - 320));
  --rotateTimes: 0;
}

li a:before {
  background-color: #fff;
  border-radius: 50%;
  content: "";
  display: block;
  opacity: 0.5;
  position: absolute;
  top: 0.75em;
  left: 0.75em;
  width: 1em;
  height: 0.5em;
  transform: rotate(-45deg);
}
li a:focus,
li a.current {
  box-shadow: 0 0 0 0.1em #ff0 inset, 0 0 1em #ff0 inset;
  outline: 0;
}
li a:focus span,
li a.current span {
  color: #ff0;
}
li a:hover {
  margin: -5% 0 0 -5%;
  width: 110%;
  height: 110%;
}
li a:hover i {
  width: 1.1em;
  height: 1.1em;
}

@media (prefers-reduced-motion) {
  li {
    animation: none;
  }
}
/* Animations */
.rise {
  animation: rise 1s ease-out;
}
.rise a {
  animation: fadeOut 1s ease-out;
}
.rise a.pop {
  animation: pop 1s linear;
}
.rise a.pop svg,
.rise a.pop span {
  visibility: hidden;
}

@keyframes rise {
  from {
    transform: translateZ(0);
  }
  15% {
    transform: translateZ(-1em);
  }
  to {
    transform: translateZ(35em);
  }
}
@keyframes fadeOut {
  from,
  15% {
    opacity: 1;
  }
  50%,
  to {
    opacity: 0;
  }
}
@keyframes pop {
  from {
    margin: -5% 0 0 -5%;
    width: 110%;
    height: 110%;
    opacity: 1;
  }
  10%,
  to {
    margin: -20% 0 0 -20%;
    width: 140%;
    height: 140%;
    opacity: 0;
  }
}
@keyframes idle {
  from,
  to {
    transform: translate(-50%, -48%);
  }
  25% {
    transform: translate(-52%, -50%);
  }
  50% {
    transform: translate(-50%, -52%);
  }
  75% {
    transform: translate(-48%, -50%);
  }
}
</style>

<style lang="less" scoped>
.pop-menu {
  background-color: #002;
  background-image: radial-gradient(circle at center, #045, #002);
  color: #fff;
  font: 1em "Open Sans", sans-serif;
  height: 100vh;
  line-height: 1.5;
  nav {
    width: 18em;
    height: 18em;
    transform: translate(-50%, -50%) rotateX(75deg);
  }
  ul {
    list-style: none;
  }

  nav,
  ul,
  li {
    transform-style: preserve-3d;
  }
  nav,
  li {
    position: absolute;
    top: 50%;
    left: 50%;
  }
  /* Position bubbles */
  ::v-deep li:nth-of-type(1) {
    animation-delay: 0s;
  }
  ::v-deep li:nth-of-type(1) a {
    transform: rotate(calc(0deg + var(--rotateTimes) * 51.4285714286deg))
      translateY(9em) rotate(calc(0deg - var(--rotateTimes) * 51.4285714286deg))
      rotateX(-75deg);
  }

  ::v-deep li:nth-of-type(2) {
    animation-delay: -0.5s;
  }
  ::v-deep li:nth-of-type(2) a {
    transform: rotate(
        calc(-51.4285714286deg + var(--rotateTimes) * 51.4285714286deg)
      )
      translateY(9em)
      rotate(calc(51.4285714286deg - var(--rotateTimes) * 51.4285714286deg))
      rotateX(-75deg);
  }

  ::v-deep li:nth-of-type(3) {
    animation-delay: -1s;
  }
  ::v-deep li:nth-of-type(3) a {
    transform: rotate(
        calc(-102.8571428571deg + var(--rotateTimes) * 51.4285714286deg)
      )
      translateY(9em)
      rotate(calc(102.8571428571deg - var(--rotateTimes) * 51.4285714286deg))
      rotateX(-75deg);
  }

  ::v-deep li:nth-of-type(4) {
    animation-delay: -1.5s;
  }
  ::v-deep li:nth-of-type(4) a {
    transform: rotate(
        calc(-154.2857142857deg + var(--rotateTimes) * 51.4285714286deg)
      )
      translateY(9em)
      rotate(calc(154.2857142857deg - var(--rotateTimes) * 51.4285714286deg))
      rotateX(-75deg);
  }

  ::v-deep li:nth-of-type(5) {
    animation-delay: -2s;
  }
  ::v-deep li:nth-of-type(5) a {
    transform: rotate(
        calc(-205.7142857143deg + var(--rotateTimes) * 51.4285714286deg)
      )
      translateY(9em)
      rotate(calc(205.7142857143deg - var(--rotateTimes) * 51.4285714286deg))
      rotateX(-75deg);
  }
}
</style>
